<template>
  <div id="app">
    <!-- 提示框 -->
    <transition name="slide">
      <Toast v-show="isShowToast"></Toast>
    </transition>
    
    <!-- 顶部 -->
    <!-- 利用了key值发生改变，组件就会被重载的特点 -->
    <TopBar :key="keyVal"></TopBar>

    <!-- 头部导航栏 -->
    <Header></Header>

    <!-- 路由切换内容 -->
    <router-view />

    <!-- 底部页面 -->  
    <Footer></Footer>

    <!-- 登录框 -->
    <Login v-show="isShowLoginModel"></Login>
  </div>
</template>

<script>
  // 组件相关 
  import TopBar from '@/components/app/TopBar.vue'
  import Header from '@/components/app/Header.vue'
  import Footer from '@/components/app/Footer.vue'
  import Login from '@/components/app/Login.vue'
  import Toast from '@/components/app/Toast.vue'

  // vuex相关
  import { mapState } from 'vuex'

  export default {
    name: '',
    components: {
      TopBar,
      Header,
      Footer,
      Login,
      Toast
    },
    props: {

    },
    data() {
      return {
        keyVal:0
      };
    },
    computed: {
      ...mapState({
        isShowLoginModel: state => state.isShowLogin.isShowLoginModel,
        isShowToast: state => state.toastStatus.isShowToast
      })
    },
    watch:{
    // 路由监听
    "$route.path":{
      handler(newVal,oldVal){
        // console.log(newVal,oldVal)
        // 当路径发生变化
        if(newVal != oldVal){ 
          // key属性的值一变化，就会做TopBar组件重载，从而执行其created函数
          this.keyVal++
        }
        
      }
    }
  }
  };
</script>

<style scoped lang="less">
/*
    enter进场的结束状态 == leave离场的开始状态

    enter进场的开始状态 == leave离场的结束状态

*/ 
.slide-enter,
.slide-leave-to{
  top: -30px;
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active{
  transition: all .2s linear;
}

.slide-enter-to,
.slide-leave{
  top: 0px;
  opacity: 1;
}
</style>